<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>クッキーサンプル：フォントサイズ変更</title>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../js/cookie.js"></script>
<script type="text/javascript" src="../../js/fontresize.js"></script>
<style>
ul.panel{
	float:right;
	border:1px solid #ccc;
	padding:4px;
}
ul.panel li{
	list-style:none;
	float:left;
	margin:0 2px 0 0;
	padding:2px;
}
ul.panel li.normal{
	color:#FFFFFF;
	background-color:#aaa;
}
ul.panel li.normal:hover, ul.panel li.select{
	background-color:#555;
}
</style>
<script>
document.observe('dom:loaded', function(){
	new FontResize({target:'content'});
});
</script>
</head>

<body>
<div id="header">
	<ul class="panel">
		<li>文字サイズの変更:</li>
		<li id="font-small">小</li>
		<li id="font-normal">標準</li>
		<li id="font-large">大</li>
	</ul>   
</div>

<div id="content" style="padding:10px;">
<h2>フォントサイズの動的な変更</h2>
<h3>さらにHTTPクッキーにその状態を記憶させます</h3>
<p>
最近ではユーザーアクセサビリティを配慮したサイトが増えてきました。<br />
その中でも、文字サイズを変更できるようにすることは最低限実装したい機能でしょう。
</p><p>
CookieManager はHTTPクッキーを読み書きするミニマムな実装で、
使用するライブラリは、prototype.js です。
これを使って記憶可能なフォントサイズをユーザが変更できる機能を作成します。
</p><p>
このデモではブラウザを開いている間のみフォントサイズを記憶していますが、
コンストラクタで「expire」を指定することで有効期間（日数）を指定可能です。<br />
ただ、HTTPクッキーはユーザーのディスクにファイルとして保存されますので、
不必要なファイルを残さない為にもブラウザを開いている間（セッション）のみ有効なクッキーを使いましょう。
</p>
</div>
        
</body>
</html>

